import { nodeResolve } from "@rollup/plugin-node-resolve";
import vue from "rollup-plugin-vue";
import commonjs from "@rollup/plugin-commonjs";
import alias from "@rollup/plugin-alias";
import path from "path";
import postcss from "rollup-plugin-postcss";
import { fileURLToPath } from "url";
import sass from "sass";
import url from "@rollup/plugin-url";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

export default {
  input: "src/index.js",
  output: [
    {
      file: "dist/bundle.cjs.js",
      format: "cjs",
      exports: "named",
    },
    {
      file: "dist/bundle.esm.js",
      format: "esm",
    },
    {
      file: "dist/bundle.umd.js",
      format: "umd",
      name: "OpenLayersMap",
      globals: {
        vue: "Vue",
        "element-ui": "ELEMENT",
      },
    },
  ],
  external: ["vue", "element-ui"],
  plugins: [
    alias({
      entries: [{ find: "@", replacement: path.resolve(__dirname, "src") }],
    }),
    nodeResolve(),
    commonjs(),
    vue({
      css: true,
      compileTemplate: true,
    }),
    postcss({
      extensions: [".scss", ".css"],
      extract: path.resolve(__dirname, "dist/ol.css"), // 将 CSS 文件提取为独立文件
      minimize: true,
      implementation: sass,
    }),
    url({
      // 将小于 10 KB 的文件内联为 base64 URL
      limit: 10 * 1024,
      // 为打包的资源文件指定目录
      publicPath: "/assets/",
      // 输出到 dist 目录
      destDir: path.resolve(__dirname, "dist/assets"),
      // 处理哪些文件
      include: ["**/*.svg", "**/*.png", "**/*.jpg", "**/*.gif"],
    }),
  ],
};
